    var titleListEl = document.querySelector(".title-list")
    var imageListEl = document.querySelector(".image-list")

    var activeItemEl = document.querySelector(".active")
    var currentIndex = 0

    titleListEl.onmouseover = function(event) {
      var itemEl = event.target.parentElement
      if (!itemEl.classList.contains("item")) return

      var index = Array.from(titleListEl.children).findIndex(function(item) {
        return item === itemEl
      })
      currentIndex = index

      switchBanner()
    }

    setInterval(function() {
      currentIndex++
      if (currentIndex === titleListEl.children.length) {
        currentIndex = 0
      }

      switchBanner()
    }, 3000);


    function switchBanner() {
      imageListEl.style.transform = `translateX(${-380 * currentIndex}px)`
      imageListEl.style.transition = `all 300ms ease`

      activeItemEl.classList.remove("active")

      var currentItemEl = titleListEl.children[currentIndex]
      currentItemEl.classList.add("active")

      activeItemEl = currentItemEl
    }